<template>
  <div>
    <div class="center_bottom">
      <div
          :options="options"
          id="bottomLeftChart"
          class="echarts_bottom"
      ></div>
    </div>
    <div class="message-list">
      <div v-for="message in messages" :key="message.id" class="message-item">
        {{ message.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, content: 'Hello, World!' },
        { id: 2, content: 'Welcome to the message list!' },
        // 其他消息...
      ]
    };
  },
};
</script>
<style lang="scss" scoped>
.message-list {
  display: flex;
  flex-direction: column;
  /* 其他样式... */
}

.message-item {
  padding: 10px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  /* 其他样式... */
}
</style>
